const domSymbol = Symbol("watermark-dom");

export function useWatermark(appendEl: HTMLElement | null = document.body) {
    let func: Fn = () => {
    };
    const id = domSymbol.toString();
    const clear = () => {
        const domId = document.getElementById(id);
        if (domId) {
            const el = appendEl;
            el && el.removeChild(domId);
        }
        window.removeEventListener("resize", func);
    };
    const createWatermark = (str: string) => {
        clear();

        const can = document.createElement("canvas");
        can.width = 300;
        can.height = 240;

        const cans = can.getContext("2d");
        if (cans) {
            cans.rotate((-20 * Math.PI) / 120);
            cans.font = "15px Vedana";
            cans.fillStyle = "rgba(0, 0, 0, 0.15)";
            cans.textAlign = "left";
            cans.textBaseline = "middle";
            cans.fillText(str, can.width / 20, can.height);
        }

        const div = document.createElement("div");
        div.id = id;
        div.style.pointerEvents = "none";
        div.style.top = "0px";
        div.style.left = "0px";
        div.style.position = "absolute";
        div.style.zIndex = "100000000";
        div.style.width = document.documentElement.clientWidth + "px";
        div.style.height = document.documentElement.clientHeight + "px";
        div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
        const el = appendEl;
        el && el.appendChild(div);
        return id;
    };

    function setWatermark(str: string) {
        createWatermark(str);
        func = () => {
            createWatermark(str);
        };
        window.addEventListener("resize", func);
    }

    return { setWatermark, clear };
}
